<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>shopping</title>
	<link rel="stylesheet" href="shopping.css">
</head>
<body>
	<div id="app" v-cloak>
		<template v-if="list.length">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list">
						<td>{{ index }}</td>
						<td>{{ item.name }}</td>
						<td>{{ item.price }}</td>
						<td>
							<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
							{{item.count}}
							<button @click="handleAdd(index)">+</button>
						</td>
						<td><button @click="handleRemove(index)">移除</button></td>
					</tr>
				</tbody>
			</table>
			<div>总价：¥ {{ totalPrice }}</div>
		</template>
		<div v-else>购物车为空</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script src=shopping.js></script>
</body>
</html>